import styled from '@emotion/styled';
import classNames from 'classnames';
import { FC, ReactNode } from 'react';

import { colors } from '@/config/theme';

interface TreeNodeItemProps {
  icon?: string;
  right: ReactNode;
  title: ReactNode;
  onClick?: () => void;
  isActive?: boolean;
}

const TreeNodeItemDiv = styled.div`
  border-radius: 4px;
  height: 34px;

  &.is-active {
    background-color: ${colors.gray['200']};
  }

  .ant-dropdown-trigger {
    display: flex;
    align-items: center;
  }
`;

export const TreeNodeItem: FC<TreeNodeItemProps> = memo((props) => {
  const { icon, right, title, onClick } = props;
  return (
    <TreeNodeItemDiv
      onClick={onClick}
      className={classNames('flex tree-node-item items-center', props.isActive ? 'is-active' : '')}>
      {icon && <span className={`iconfont ${icon!}`}></span>}
      <div className="flex items-center justify-between w-full pr-4 pl-8">
        <span className="text-14">{title}</span>
        <div className="p-4">{right}</div>
      </div>
    </TreeNodeItemDiv>
  );
});
